<template>
  <div style="height: 100%;background-color: #01001C;">
    <div v-if="hostList.length>0" class="camera3">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple2">
            <div style="transform: translateX(0%) translateY(28%);height: 25px;">庭审主机状态</div><hr style="background-color: rgb(21,46,100);height: 1px;border: none;">
          </div>
          <div v-if="hostList[0].onLine !=false" style="margin-top: -69px;font-size: 24px;font-family: Microsoft YaHei;font-weight: 400;color: #1CF711;line-height: 48px;border-right: 2px solid rgb(21,46,100);border-left: 2px solid #FFFFFF;">在线</div>
          <div v-if="hostList[0].onLine ==false" style="margin-top: -69px;font-size: 24px;font-family: Microsoft YaHei;font-weight: 400;color: #F10808;line-height: 48px;border-right: 2px solid rgb(21,46,100);border-left: 2px solid #FFFFFF;">离线</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple2">
            <div style="transform: translateX(0%) translateY(28%);height: 25px;">剩余空间</div><hr style="background-color: rgb(21,46,100);height: 1px;border: none;">
          </div>
          <div style="margin-top: -69px;font-size: 24px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF;line-height: 48px;border-right: 2px solid #FFFFFF;">{{ memory }}%</div>
        </el-col>
      </el-row>
    </div>
    <div v-if="hostList.length>0" class="camera3">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple2">
            <div style="transform: translateX(0%) translateY(28%);height: 25px;">开起全部设备</div><hr style="background-color: rgb(21,46,100);height: 1px;border: none;">
          </div>
          <div style="margin-top: -69px;font-size: 24px;font-family: Microsoft YaHei;font-weight: 400;color: #1CF711;line-height: 48px;border-right: 2px solid rgb(21,46,100);border-left: 2px solid #FFFFFF;"><img
            src="../../assets/imgs/videos.png"
            style="width: 41px;height: 41px;"
          ></div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple2">
            <div style="transform: translateX(0%) translateY(28%);height: 25px;">关闭全部设备</div><hr style="background-color: rgb(21,46,100);height: 1px;border: none;">
          </div>
          <div style="margin-top: -69px;font-size: 24px;font-family: Microsoft YaHei;font-weight: 400;color: #1CF711;line-height: 48px;border-right: 2px solid #FFFFFF;"><img
            src="../../assets/imgs/close.png"
            style="width: 41px;height: 41px;"
          >
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getAllTribunalEquipmentListByType } from '@/api/tribunalEquipment'
export default {
  name: '',
  props: {
    tribunal5: {
      type: Number, // 类型
      default: () => {
      } // 默认值
    }
  },
  data() {
    return {
      week: null,
      isShow: false,
      times: null,
      times2: null,
      hostList: [],
      TribunalOptions: [],
      courtCode: null,
      memory: this.getRandomNum(40, 70),
      tribunalCode: this.tribunal,
      host: {
        tribunalCode: this.tribunal,
        typeId: '2'
      }
    }
  },
  watch: {
    tribunal5(newvalue) {
      this.host.tribunalCode = newvalue
      if (this.host.tribunalCode != null) {
        this.getAllTribunalEquipmentListByType()
      }
    }
  },
  created() {
  },
  methods: {
    // 本例子代表生成10-100的随机数
    getRandomNum(Min, Max) {
      var Range = Max - Min
      var Rand = Math.random()
      return (Min + Math.round(Rand * Range))
    },

    getAllTribunalEquipmentListByType() {
      getAllTribunalEquipmentListByType(this.host).then(response => {
        this.hostList = response.data
        if (this.hostList.length > 0) {
          this.memory = this.hostList[0].memory
          if (this.hostList[0].onLine === undefined) {
            this.hostList[0].onLine = false
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

     .camera3 {
      width: 45%;
      height: 110px;
      font-size: 5px;
      color: #FFFFFF;
      float: left;
      text-align: center;
      margin-left: 25px;
      border-radius: 5px;
      // background-image: linear-gradient(to top,#FFBEBE,#FD2A2A);
    }
    .bg-purple2 {
    // background: #011C53;
    // opacity: 0.7;
    background: rgb(1,28,83);
    height: 110px;
  }
</style>
